<template>
  <div class="container">
    <TechBackground />
    <TitleCell />
    <ElRow>
      <ElCol :span="1"></ElCol>
      <ElCol :span="22">
        <SearchForm @query-change="queryChange" />
        <PreviewEcharts
          v-loading="exposureLineStore.loading"
          class="preview-echarts"
          element-loading-background="#0a192f"
          ref="previewEchartsRef" />
      </ElCol>
      <ElCol :span="1"></ElCol>
    </ElRow>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PreviewEcharts from './components/PreviewEcharts.vue'
import SearchForm from './components/SearchForm.vue'
import TitleCell from './components/TitleCell.vue'
import TechBackground from '@/components/TechBackground.vue'
import { useExposureLineStore } from '@/stores/exposureLine'
const exposureLineStore = useExposureLineStore()
const previewEchartsRef = ref<InstanceType<typeof PreviewEcharts> | null>(null)
const queryChange = () => {
  if (previewEchartsRef) {
    previewEchartsRef.value?.setChatOptions()
  }
}
</script>
<style scoped lang="scss">
.container {
  .preview-echarts {
    background-color: #0a192f;
  }
}
</style>
